<template>
  <div class="shopMain">
    <el-card class="el-card">
<!--      分上下两块，上分左右两块-->
     <div>
       <el-row>
        <!-- 左边的图片-->
         <el-col :span="12">
           <div  style="text-align: center">
             <el-image style="width: 500px; height: 400px;border-radius: 30px" :src="goods.img"  />
           </div>
         </el-col>
        <!--右边的信息-->
         <el-col :span="12">
           <div style="padding: 50px; text-align: center">
             <h1 style="font-size:30px;">{{ goods.name }}</h1>
             <span style="font-size:20px;">{{ goods.main }}</span>
             <div style="margin-top: 30px; ">
               <span style="font-size:20px;">价格:  {{ goods.price }}  rmb</span>
             </div>
             <div style="text-align: center;margin-top: 100px">
               <el-button type="primary" round @click="dialogVisible=true">立刻付款</el-button>
               <el-button  type="primary" round @click="goCart">加入购物车</el-button>
             </div>
           </div>
         </el-col>
       </el-row>

        <!-- 二维码里面的内容-->
        <div style="text-align: center">
           <el-dialog
              v-model="dialogVisible" :title="'请支付'+goods.price+'rmb'" width="30%" :before-close="handleClose" >
          <qrcode-vue :value="qrCodeData"></qrcode-vue>
          <template #footer>
              <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">离开</el-button>
                    <el-button type="primary" @click="dialogVisible = false">完成</el-button>
              </span>
          </template>
          </el-dialog>
        </div>


     </div>
      <hr>

    </el-card>

  </div>
</template>

<script setup>
import {onBeforeMount, ref} from "vue";
import { useRoute } from 'vue-router';
import * as goodsApi from '@/api/goods.js';
import { ElNotification } from 'element-plus'
import * as cartApi from '@/api/cart.js'
import QrcodeVue from 'qrcode.vue'

const route = useRoute()
const qrCodeData = ref()
const dialogVisible = ref(false)
const goods = ref({})

onBeforeMount(()=>{
  goodsApi.selectOneGoods(route.query.id).then(resp=>{
    goods.value =resp.data
  })

})

const goCart=()=>{
  cartApi.addCart(goods.value).then((resp=>{
      if (resp.msg!='success'){
        ElNotification({
          message: resp.msg,
          type: 'error',
        })
      }else{
        ElNotification({
          message: '添加成功',
          type: 'success',
        })
      }
      console.log(resp.msg)
  }))

}
</script>

<style scoped>
.shopMain{
  margin-left: 60px;
  margin-right: 60px;
  height: 2000px;
}
</style>
